<template>

	<div class="site">

		<el-container>

			<el-aside class="m-mobile-hide" >
				<Nav :blogName="siteInfo.blogName" :categoryList="categoryList" />
			</el-aside>

			<div ref="nav">
				<NavShow v-show="navshow" class="m-pad-hide m-mobile-hide" :blogName="siteInfo.blogName" :categoryList="categoryList" :class="{'m-mobile-show': show}"
				 style="float: left;" />
			</div>


			<el-container>

				<el-header>
					<button ref="btn" class="ui black icon m-left-top m-mobile-show navbtn" style="height: 100%;" @click="toggle">
						<i class="sidebar icon large" style="color:#606266 ;"> </i>
					</button>
					<Search :categoryList="categoryList"></Search>
				</el-header>
				<el-main>
					
					<div class="main">

						<div class="m-padded-tb-big">
							<div class="ui container">
								<div class="ui stackable grid">
									<!--左侧-->
									<!-- 								<div class="three wide column m-mobile-hide" >
									
								</div> -->
									<!--中间-->
									<div class="twelve wide" style="width: 75%;">
										<keep-alive include="Home,Archives,Tag,Category">
											<router-view />
										</keep-alive>
										<!-- <Home></Home> -->
										<!-- <Introduction class="mobile only column"  v-if="$route.name==='home'" /> -->
										<Introduction class="m-mobile-show" v-if="$route.name==='home'" />
										<!-- :class="{'m-display-none':rightNavShow}" -->
									</div>
									<!-- 中间ipad -->
									
						
									<!--右侧-->
									<div class="four wide column m-pad-hide m-mobile-hide">
										<Introduction :class="{'m-display-none':focusMode}" v-if="$route.name !='blog'"  />
										<RandomBlog :randomBlogList="randomBlogList" :class="{'m-display-none':focusMode}" v-if="$route.name !='blog'" />
										<Tags :tagList="tagList" :class="{'m-display-none':focusMode}" v-if="$route.name !='blog'" />
										<!--只在文章页面显示目录-->
										<Tocbot v-if="$route.name==='blog'" />
									</div>
								</div>
							</div>
						</div>
						
					</div>

					<!--私密文章密码对话框-->
					<BlogPasswordDialog />

					<!--APlayer-->
					<div class="m-mobile-hide">
						<MyAPlayer />
					</div>
					<!--回到顶部-->
					<el-backtop style="background-color:#303133;margin-bottom: 5.5rem;">
						<i class="el-icon-caret-top" style="color: white;z-index: 99;"></i>
						<!-- <img src="/img/paper-plane.png" style="width: 3rem;height: 3rem;border-radius: 0.8rem;z-index: 999999;margin-bottom: 9.5rem;"> -->
					</el-backtop>
				</el-main>
				<el-footer>
					<Footer :siteInfo="siteInfo" :badges="badges" :newBlogList="newBlogList" :hitokoto="hitokoto" />
				</el-footer>
			</el-container>
		</el-container>


		<!--顶部导航-->



		<!--底部footer-->

	</div>
</template>

<script>
	import jQuery from "jquery"
	import {
		getHitokoto,
		getSite
	} from '@/api/index'
	import Nav from "@/components/index/Nav";
	import NavShow from "@/components/index/NavShow";
	import Search from "@/components/index/Search";
	import Header from "@/components/index/Header";
	import Footer from "@/components/index/Footer";
	import Introduction from "@/components/sidebar/Introduction";
	import Tags from "@/components/sidebar/Tags";
	import RandomBlog from "@/components/sidebar/RandomBlog";
	import MyAPlayer from "@/components/index/MyAPlayer";
	import Tocbot from "@/components/sidebar/Tocbot";
	import BlogPasswordDialog from "@/components/index/BlogPasswordDialog";
	import {
		mapState
	} from 'vuex'
	import {
		SAVE_CLIENT_SIZE,
		SAVE_INTRODUCTION,
		SAVE_SITE_INFO,
		RESTORE_COMMENT_FORM,
		SET_IS_BLOG_TO_HOME
	} from "@/store/mutations-types";

	export default {
		name: "Index",
		components: {

			Header,
			BlogPasswordDialog,
			Tocbot,
			MyAPlayer,
			RandomBlog,
			Tags,
			Nav,
			Search,
			NavShow,
			Footer,
			Introduction
		},
		data() {
			return {
				navshow: false,
				show: false,
				siteInfo: {
					blogName: ''
				},
				categoryList: [],
				tagList: [],
				randomBlogList: [],
				badges: [],
				newBlogList: [],
				hitokoto: {},
				rightNavShow: true
			}
		},
		computed: {
			...mapState(['focusMode'])
			// focusMode:(state) => false
		},
		watch: {
			//路由改变到文章页面，页面滚动至顶部
			'$route.path'() {
				this.show = false
				// this.scrollToTop()
				if (this.$route.name === 'blog') {
					this.scrollToTop()
				}
				// if (this.$route.name === 'home') {
				// 	// if(SET_IS_BLOG_TO_HOME == true){
				// 	// 	console.log("从文章页面返回")
				// 	// this.scrollToTop()
				// 	// }
				// 	console.log(SET_IS_BLOG_TO_HOME)
				// 	console.log("进入首页")
				// }
			},

		},
		created() {
			this.getSite()
			this.getHitokoto()
			//从localStorage恢复之前的评论信息
			this.$store.commit(RESTORE_COMMENT_FORM)

		},
		mounted() {
			//保存可视窗口大小
			this.$store.commit(SAVE_CLIENT_SIZE, {
				clientHeight: document.body.clientHeight,
				clientWidth: document.body.clientWidth
			})
			window.onresize = () => {
				this.$store.commit(SAVE_CLIENT_SIZE, {
					clientHeight: document.body.clientHeight,
					clientWidth: document.body.clientWidth
				})
			}


			//监听点击事件，收起导航菜单
			document.addEventListener('click', (e) => {
				let flag = e.path.some(item => {
					if (item === this.$refs.nav) {
						return true
					}

				})
				let flag2 = e.path.some(item => {
					if (item === this.$refs.btn) {
						return true
					}

				})

				// console.log("是否点击nav:", flag)
				// console.log("是否点击btn", flag2)

				//如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
				if (this.show === true && !flag && !flag2) {
					this.show = false
				}

				// console.log("导航是否显示:", this.show)
			})
			// this.flag = navigator.userAgent.match(
			// 	/(phone|pod|iPhone|ios|Android|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
			// );
			// console.log(this.flag);
			// if (this.flag === null) {
			// 	console.log("pc端");
			// 	this.rightNavShow = true;
			// } else {
			// 	console.log("移动端");
			// 	this.rightNavShow = false;
			// }

			// if ($(window).width() < 420) {
			// 	console.log("移动端");
			// 	this.rightNavShow = false;
			// }else{
			// 	console.log("pc端");
			// 	this.rightNavShow = true;
			// }

		},
		methods: {
			// getShow(isshow){
			// 	this.show = isshow;
			// },
			getSite() {
				getSite().then(res => {
					if (res.code === 200) {
						this.siteInfo = res.data.siteInfo
						this.badges = res.data.badges
						this.newBlogList = res.data.newBlogList
						this.categoryList = res.data.categoryList
						this.tagList = res.data.tagList
						this.randomBlogList = res.data.randomBlogList
						this.$store.commit(SAVE_SITE_INFO, this.siteInfo)
						this.$store.commit(SAVE_INTRODUCTION, res.data.introduction)
						document.title = this.$route.meta.title + this.siteInfo.webTitleSuffix
					}
				})
			},
			//获取一言
			getHitokoto() {
				getHitokoto().then(res => {
					this.hitokoto = res
				})
			},
			toggle() {
				this.show = !this.show
				// this.$('.ui.sidebar')
				//   .sidebar('toggle')
				// ;
			}

		},

	}
</script>

<style scoped>
	.navbtn {
		border: 0px;
		background-color: white;
		width: 5.625rem !important;
	}

	.site {
		display: flex;
		min-height: 100vh;
		/* 没有元素时，也把页面撑开至100% */
		flex-direction: column;

	}
	
	.main {
		margin-top: -20px;
		flex: 1;

	}

	.main .ui.container {
		width: 98% !important;
		margin-left: auto !important;
		margin-right: auto !important;

	}

	.ui.grid .four.column {
		padding: 0;
		padding-right: 1.05rem;

	}

	.ui.grid .twelve.column {
		padding-top: 0;
		padding-left: 1.85rem !important;
		padding-right: 1.85rem !important;
	}
	


	.m-display-none {
		display: none !important;
	}

	.m-display-none {
		display: none !important;
	}

	/* 页面容器 */
	.el-header,
	.el-footer {
		/* background-color: #B3C0D1; */
		/* color: #333; */
		/* text-align: center; */
		/* line-height: 60px; */
		padding: 0 !important;
		margin: 0 !important;
	}

	.el-header {
		display: flex;
	}

	.el-aside {
		/* background-color: #D3DCE6; */
		/* color: #333; */
		/* text-align: center; */
		/* line-height: 200px; */
		width: 16%;
	}

	.el-main {
		background-color: #E9EEF3;
		box-shadow: 0 17px 10px -8px #cecece inset;
		overflow: visible !important;
	}

	body>.el-container {
		/* margin-bottom: 40px; */

	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
	
</style>
